<template>
	<view class="container">
		<u-navbar :autoBack="true" leftIconColor="#fff"  placeholder bgColor="#0a0816">
			<template slot="center">
				<view class="navber-box">
					<u-tabs :itemStyle="{ height: '68rpx' }" :inactiveStyle="{fontSize:'32rpx',color:'#cdc6c6'}"
							:activeStyle="{fontSize:'32rpx',color:'#FFF'}"  :scrollable="false" :lineWidth="40" :duration="200"
						lineColor="#9f5ff6" :list="tabList"></u-tabs>
				</view>
			</template>
			<!-- <template #right>
				<image class="search" @click="hanldeSearch" src="../../static/icon/search.png" mode=""></image>
			</template> -->
		</u-navbar>

		<u-tabs @change="hanldeMarketType" :activeStyle="{ color: '#9f5ff6',fontSize: '32rpx' }"
			:inactiveStyle="{ fontSize: '28rpx' }" :itemStyle="{ height: '68rpx' }" :scrollable="false" :lineWidth="0"
			:duration="200" lineColor="#9f5ff6" :list="marketType"></u-tabs>

		<view class="pad-left-right-32 mar-top-24">
			<view class="centerY bg-white pad-24 radius24 mar-bottom-32" @click="hanldeOrderInfo"
				v-for="(item,index) in list">
				<image class="cover radius16" :src="item.goods_info.cover+'?image_process=resize,l_350'" mode="">
				</image>
				<view class="mar-left-20 right-h flex-w betweenY">
					<view class="betweenX">
						<view>
							<view class="font-28 font-w-500 multi1">{{item.goods_info.name}}</view>
							<view class="centerY mar-top-10">
								<view v-if="item.status == 30"
									class="bg-theme color-white font-24 radius4 pad-left-right-12 pad-top-bottom-4">
									已出售</view>
								<view v-else-if="item.status == 10"
									class="bg-theme color-white font-24 radius4 pad-left-right-12 pad-top-bottom-4">寄售中
								</view>
								<view class="font-20">
									<text
										class="mar-left-20">#</text><text>{{item.goods_code}}</text><text>/{{item.goods_info.build}}</text>
								</view>
							</view>
						</view>
						<view>
							<text class="font-20">￥</text><text class="font-40">{{item.price}}</text>
						</view>
					</view>

					<view class="betweenX centerY">
						<text class="font-20 color-grey">共 1 件寄售</text>
						<view @click="hanldeCancel(item.id,index)" v-if="item.status == 10" class="button font-20">取消寄售
						</view>
					</view>
				</view>
			</view>
			<u-empty v-if="list.length == 0" text=" " icon="../../static/image/empty.png"></u-empty>
			<u-loadmore v-if="list.length > 0" :status="pageStatus" color="#df0007" iconColor="#df0007" />
		</view>
		<my-popup content="确认取消此寄售吗？" :show="isPopup" @cancel="isPopup = false" @confirm="hanldeConfirm"></my-popup>
	</view>
</template>

<script>
	// 接口地址
	import {
		myMarketList,
		cancelMarket
	} from '@/config/api.js'
	export default {
		data() {
			return {
				tabList: [{
						name: '数字藏品'
					},
					{
						name: '盲盒'
					}
				],
				marketType: [{
					name: '全部',
					value: [10, 30]
				}, {
					name: '寄售中',
					value: [10]
				}, {
					name: '已成交',
					value: [30]
				}, ],
				ps: 6,
				page: 1,
				// 加载中状态
				pageStatus: 'loadmore',
				// 列表数据
				list: [],
				// 默认寄售状态
				status_arr: [10, 30],
				// 取消寄售弹窗
				isPopup: false,
			}
		},
		onLoad() {
			this.getDataList();
		},
		// 上拉加载更懂
		onReachBottom() {
			if (this.pageData.next_page_url) {
				this.getDataList();
			}
		},
		methods: {
			// 关闭寄售
			hanldeConfirm() {
				cancelMarket({
					id: this.marketId
				}).then(res => {
					uni.$u.toast(res.msg);
					this.list.splice(this.listIndex,1);
					this.isPopup = false;
				})
			},
			// 打开取消寄售弹窗
			hanldeCancel(id, index) {
				this.listIndex = index;
				this.marketId = id;
				this.isPopup = true;
			},
			// 切换寄售状态
			hanldeMarketType(e) {
				this.status_arr = e.value;
				this.page = 1;
				this.list = [];
				this.getDataList();
			},
			// 获取状态
			getDataList() {
				this.pageStatus = 'loading';
				let data = {
					ps: this.ps,
					page: this.page,
					status_arr: this.status_arr
				}
				myMarketList(data).then(res => {
					this.pageStatus = 'loadmore';

					let {
						data
					} = res;
					this.pageData = data;
					this.page = data.current_page + 1;
					this.list = this.list.concat(data.data);
					// 没有更多了
					if (data.next_page_url == null) {
						this.pageStatus = 'nomore'
					}
				})
			},
			hanldeOrderInfo() {
				// uni.navigateTo({
				// 	url: '/pages/goods/orderinfo'
				// })
			}
		}
	}
</script>
<style scoped lang="scss">
	.container {
		min-height: 100vh;

		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}


		.navber-box {
			width: 400rpx;
		}

		.search {
			width: 88rpx;
			height: 88rpx;
		}

		.more {
			width: 28rpx;
			height: 28rpx;
		}

		.right-h {
			height: 160rpx;
		}

		.cover {
			display: block;
			width: 160rpx;
			height: 160rpx;
		}

		.button {
			width: 144rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			border-radius: 24rpx;
			border: 1rpx solid $uni-theme;
			color: $uni-theme;
		}
	}
</style>